<template>
	<view class="">
		<view class="flex">
			<view class="left_btn">
				<view class="tab_btn" v-for="(i,v) in grade_ids" :key="v" :class="current==v?'hover':''"
					@click="tabClick(i,v)">
					{{i.label}}
				</view>
			</view>
			<view class="right paddingTop-20">
				<view class="right_list" v-for="(item,index) in list" :key="index" v-if="list.length!=0">
					<view class="flex u-flex-between">
						<view class="flex">
							<image :src="item.avatar" mode=""></image>
							<view class="name">
								{{item.username}}
							</view>
						</view>
						<view class="time">
							{{item.last_time}}
						</view>
					</view>
					<view class="cont paddingTop-28 paddingBottom-20">
						{{item.english_story}}
					</view>
					<view class="imgList" >
						<image :src="i" mode="" v-for="(i,v) in item.story_pics" :key="v" @click="imgPreview(i)"></image>
					</view>
					<!-- <view class="num text-right">
						查看5次
					</view> -->
				</view>
				<view class="" v-else>
					<image src="../../static/image/nodata.png" mode="" class="noda_img"></image>
					<view class="noda_title">
						无相关内容，看看其他的吧！
					</view>
				</view>
				<up-loadmore :status="status"  v-if="list.length!=0"   />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app';
	const current = ref(0)
	// 创建响应式数据  
	const status = ref('loadmore');
	const list = ref([]);
	const page = ref(1);
	const grade_ids = ref([])
	const grade_id = ref('')
	const getGradeListApi = inject('getGradeList')
	const getStoryListApi = inject('getStoryList')
		const getUserInfoApi = inject('getUserInfo');
	const total_page=ref(0)
	const info=ref({})
	onLoad((op) => {
		// info.value=uni.getStorageSync('')
		
		getGradeListApi({}).then(res => {
			console.log(res, 58)
			grade_ids.value = res.grade_ids
			grade_id.value = res.grade_ids[0].value
		loginWordCode()
			
		})
	})
	const loginWordCode = () => {
		getUserInfoApi().then(res => {
			console.log(res,78)
			// grade_id.value = res.memberset.grade_id
			grade_ids.value.forEach((item,index)=>{
				if(item.value==res.memberset.grade_id){
					grade_id.value = res.memberset.grade_id
					current.value=index
				}
			})
			getList()
		})
	};
	const tabClick = (i, v) => {
		current.value = v
		grade_id.value = i.value
		page.value = 1
		list.value = []
		getList()
	}
	const imgPreview = (url) => {
	uni.previewImage({
	    urls: [url]
	})
	}

	const getList = () => {
		uni.showLoading({
			title:'加载中'
		})
		getStoryListApi({
			grade_id: grade_id.value,
			page:page.value
		}).then(res => {
			console.log(res, 70)
			uni.hideLoading()
			list.value = [...list.value,...res.list]
			total_page.value=res.total_page
			if (page.value >= total_page.value) status.value = 'nomore';
			else status.value = 'loading';
		})
	}
	onReachBottom(() => {
		console.log('走不走')
		if (page.value >= total_page.value) return;
		status.value = 'loading';
		page.value++;
		getList()
		setTimeout(() => {
			if (page.value >= total_page.value) status.value = 'nomore';
			else status.value = 'loading';
		}, 2000);

	})
</script>

<style scoped lang="scss">
	.left_btn {
		width: 176rpx;
		height: 100vh;
		background: rgba(81, 213, 128, .08);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;

		.tab_btn {
			width: 176rpx;
			height: 104rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			text-align: center;
			line-height: 104rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.hover {
			background: #FFFFFF;
			color: #51D580;
		}
	}

	.right {
		// height: 100vh;
		// overflow-y: auto;
		position: relative;
		left: 177rpx;
		width: 574rpx;

		.right_list {
			padding: 20rpx 32rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #EBEBEB;

			image {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}

			.cont {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.imgList{
				image{
					width: 160rpx;
					height: 160rpx;
					margin-right: 15rpx;
				}
			}
		}
	}
	.noda_img{
		width: 160rpx;
		height: 160rpx;
		margin: 300rpx auto 40rpx;
		display: block;
	}
	.noda_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}
</style>